<template>
	<view :style="viewColor">
		<form @submit="formSubmit">
			<div class="haibao" v-if="form.mb_type==0">
				<div class="haibao-top">
					<div class="haitetx">
						<h3>{{form.nickname}}</h3>
					</div>
					<div class="haiimage">
						<view>
							<span>海报</span>
							<image :src="imgHost + '/index/erwm.png'"></image>
						</view>
						<view>
							<image :src="form.avatar" mode=""></image>
						</view>
					</div>
				</div>
				<div class="haibao-bott">
					<view>
						<span>
							<image :src="imgHost + '/index/iconsj.png'" mode=""></image>
							<span>{{form.phone}}</span>
						</span>
						<span></span>
					</view>
					<view>
						<span>
							<image :src="imgHost + '/index/ement.png'" mode=""></image>
							<span>{{form.email}}</span>
						</span>
						<span>
							<image :src="imgHost + '/index/right.png'" mode=""></image>
						</span>
					</view>
					<view>
						<span>
							<image :src="imgHost + '/index/dinwe.png'" mode=""></image>
							<span>{{form.addres}}</span>
						</span>
						<span></span>
					</view>
				</div>
			</div>
			<div class="haibao-two" v-if="form.mb_type==1">
				<div class="moban" @click="tiajzp(1)"
					style="height: 400rpx; background-color: rgb(235 235 235 / 57%);margin-top:20rpx;text-align: center;line-height: 400rpx;">
					<text v-if="!form.mb_img1" class="iconfont" style="color: #0000007a;">&#xe605;</text>
					<image v-else :src="form.mb_img1" style="width: 100%;height: 100%;" mode="aspectFill"></image>
				</div>
				<div class="haibao1">
					<div class="haibao-top1">
						<div class="haitetx1">
							<h3>{{form.nickname}}</h3>
						</div>
						<div class="haiimage1">
							<view>
								<span>海报</span>
								<image :src="imgHost + '/index/erwm.png'"></image>
							</view>
						</div>
					</div>
					<div class="haibao-bott1">
						<view>
							<span>
								<image :src="imgHost + '/index/iconsj.png'" mode=""></image>
								<span>{{form.phone}}</span>
							</span>
							<span></span>
						</view>
						<view>
							<span>
								<image :src="imgHost + '/index/ement.png'" mode=""></image>
								<span>{{form.email}}</span>
							</span>
							<span>
								<image :src="imgHost + '/index/right.png'" mode=""></image>
							</span>
						</view>
						<view>
							<span>
								<image :src="imgHost + '/index/dinwe.png'" mode=""></image>
								<span>{{form.addres}}</span>
							</span>
							<span></span>
						</view>
					</div>
				</div>
			</div>
			<div class="h-hanbao2" v-if="form.mb_type==2" style="margin-top: 40rpx;">
				<div class="sbajia"></div>
				<div>
					<div class="h-text">
						<div>
							<h3>{{form.nickname}}</h3>
						</div>
					</div>
					<div class="haibao-bott2">
						<view>
							<span>
								<image :src="imgHost + '/index/iconsj.png'" mode=""></image>
								<span>{{form.phone}}</span>
							</span>
						</view>
						<view>
							<span>
								<image :src="imgHost + '/index/ement.png'" mode=""></image>
								<span>{{form.email}}</span>
							</span>
						</view>
						<view>
							<span>
								<image :src="imgHost + '/index/dinwe.png'" mode=""></image>
								<span>{{form.addres}}</span>
							</span>
							<span></span>
						</view>
						<view class="haibaoText">
							<view>
								<text>海报</text>
								<image :src="imgHost + '/index/erwm.png'"></image>
							</view>
						</view>
					</div>
				</div>
				<div class="h-img" @click="tiajzp(2)">
					<div class='herimg' v-if="form.mb_img ==''">
						<text class="iconfont">&#xe605;</text>
						<span>添加照片</span>
					</div>
					<image v-else :src="form.mb_img" mode="aspectFill"></image>
				</div>
			</div>
			<div class="haibao-two" v-if="form.mb_type==3">
				<div class="moban" @click="upVideo"
					style="height: 400rpx; background-color: rgb(235 235 235 / 57%);margin-top:20rpx;text-align: center;line-height: 400rpx;">
					<text v-if="!form.mb_video" class="iconfont" style="color: #0000007a;">&#xe634;</text>
					<video v-else :src="form.mb_video" style="width: 100%;height: 100%;" mode="aspectFill"></video>
				</div>
				<div class="haibao1">
					<div class="haibao-top1">
						<div class="haitetx1">
							<h3>{{form.nickname}}</h3>
						</div>
						<div class="haiimage1">
							<view>
								<span>海报</span>
								<image :src="imgHost + '/index/erwm.png'"></image>
							</view>
						</div>
					</div>
					<div class="haibao-bott1">
						<view>
							<span>
								<image :src="imgHost + '/index/iconsj.png'" mode=""></image>
								<span>{{form.phone}}</span>
							</span>
							<span></span>
						</view>
						<view>
							<span>
								<image :src="imgHost + '/index/ement.png'" mode=""></image>
								<span>{{form.email}}</span>
							</span>
							<span>
								<image :src="imgHost + '/index/right.png'" mode=""></image>
							</span>
						</view>
						<view>
							<span>
								<image :src="imgHost + '/index/dinwe.png'" mode=""></image>
								<span>{{form.addres}}</span>
							</span>
							<span></span>
						</view>
					</div>
				</div>
			</div>
			<!-- 名片样式 -->
			<view class="mpys">
				<p>名片样式</p>
				<div class="xuanze">
					<view :class="form.mb_type==0?'oimg':''" @click="setyans(0)">
						<image :src="imgHost + '/index/style2.png'"></image>
					</view>
					<view :class="form.mb_type==1?'oimg':''" @click="setyans(1)">
						<image :src="imgHost + '/index/style4.png'"></image>
					</view>
					<view :class="form.mb_type==2?'oimg':''" @click="setyans(2)">
						<image :src="imgHost + '/index/style3.png'"></image>
					</view>
					<view :class="form.mb_type==3?'oimg':''" @click="setyans(3)">
						<image :src="imgHost + '/index/style4.png'"></image>
					</view>
				</div>
				<div class='zhuzu' v-if="false">
					<span>
						<image :src="imgHost + '/index/bao.png'" mode=""></image>
						<text>选择名片页模板</text>
					</span>
					<span>
						<text>基础默认版</text>
						<image :src="imgHost + '/index/redrig.png'" mode=""></image>
					</span>
				</div>
			</view>
			<div class="mpdxx">
				<view class="mpxxbott">
					<div class="toux">
						<view class="touxiang" v-if="!form.avatar" @click.stop='uploadpic(1)'>
							<image :src="imgHost + '/index/tokrnon.png'" mode=""></image>
						</view>
						<button v-if="form.avatar" class="touxiang" open-type="chooseAvatar"
							@chooseavatar="onChooseAvatar">
							<image :src="form.avatar"></image>
						</button>
						<button v-if="form.avatar" class="touxiangS" open-type="chooseAvatar"
							@chooseavatar="onChooseAvatar">
							<view style="font-size: 28rpx;color: #161616">选择</view>
							<image :src="imgHost + '/index/right.png'" mode=""></image>
						</button>
					</div>
				</view>
				<view class="mpxxbott">
					<span>姓名<span class="xxred">*</span></span>
					<div class="namexx">
						<view class='input'><input v-model="form.nickname" type='nickname' name='nickname'
								:maxlength="16"></input>
						</view>
						<image :src="imgHost + '/index/style1.png'" mode=""></image>
					</div>
				</view>
				<view class="mpxxbott">
					<span>手机<span class="xxred">*</span></span>
					<div class="namexx" @click="editPhone">
						<span>{{form.phone}}</span>
					</div>
				</view>
				<view class="mpxxbott">
					<span>地址<span class="xxred">*</span></span>
					<div class="namexx">
						<input type="text" placeholder="点击获取/输入地址" v-model="form.addres" @click="getaddress">
					</div>
				</view>

				<view class="mpxxbott">
					<span>微信</span>
					<div class="namexx">
						<input type="text" v-model="form.wechat" placeholder="请填写微信">
					</div>
				</view>
				<!-- <view class="mpxxbott">
					<span>企业微信</span>
					<div class="namexx">
						<input type="text" v-model="form.wecom" placeholder="请填写企业微信">
					</div>
				</view> -->
				<view class="mpxxbott">
					<span>微信二维码</span>
					<div class="namexx">
						<input v-if="!form.wechat_img" type="text" disabled="true" placeholder="请上传微信二维码"
							@click.stop='uploadpic(2)'>
						<image class="wechatCode" v-else :src="form.wechat_img" @click.stop='uploadpic(2)'></image>
					</div>
				</view>
				<view class="mpxxbott">
					<span>邮箱</span>
					<div class="namexx">
						<input type="text" v-model="form.email" placeholder="请填写邮箱">
					</div>
				</view>
				<view class="mpxxbott">
					<span>是否允许独占</span>
					<div class="namexx">
						<switch color="var(--view-theme)" @change="clientSwitch" style="transform:scale(0.7)"
							:checked="form.is_client_type==1"></switch>
					</div>
				</view>
				<view class="mpxxbott">
					<span>选择招呼语</span>
					<div class="namexx">
						<text @click.stop="selectACall">{{ shareCheckText ? shareCheckText : '请选择招呼语' }}</text>
					</div>
				</view>
			</div>
			<!-- 功能区 -->
			<view class="functionArea">
				<p>功能区</p>
				<view class="selectArea">
					<cdt-draggrable-sort v-model="selectAreaList" :v-bind:id="isEdit ? 0 : 1" @start="start"
						@change="change" @deleteFunction="deleteFunction" item-class="tag-list-list"
						active-item-class="tag-list-list-acitive">
						<!-- #ifdef MP -->
						<template v-slot="{ name }">
							<view>
								<text>{{name}}</text>
							</view>
						</template>
						<!--  #endif -->
						<!-- #ifndef MP -->
						<template slot-scope="scope">
							<view>
								<text>{{scope.row.name}}</text>
							</view>
						</template>
						<!--  #endif -->
					</cdt-draggrable-sort>
				</view>
				<p v-if="noSelectAreaList.length>0">点击下列可添加功能</p>
				<view class="selectArea" v-if="noSelectAreaList.length>0">
					<view v-for="(item,index) in noSelectAreaList" @click="addFunction(item,index)">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<!-- 个性标签 -->
			<div class="gxbq" v-if="form.defaultTemplate!=1">
				<p>
					<text>个性标签</text>
					<switch color="var(--view-theme)" @change="switch_json.labelSwitch=$event.detail.value"
						style="transform:scale(0.7)" :checked="switch_json.labelSwitch"></switch>
				</p>
				<div class="tianjia">
					<view class="ofor" v-for="(item,index) in biaoqi" :key="index">{{item}}
						<div class="poster">
							<text @click="delile(index)" class='iconfont icon-shanchu' size="30rpx"></text>
						</div>
					</view>
					<div class="jia" @click="biaoqian">
						<span>+</span>
					</div>
				</div>
			</div>
			<!-- 个人简介 -->
			<div class="oinput" v-if="form.defaultTemplate!=1">
				<p>
					<text>个人简介</text>
					<switch color="var(--view-theme)" @change="switch_json.autographSwitch=$event.detail.value"
						style="transform:scale(0.7)" :checked="switch_json.autographSwitch"></switch>
				</p>
				<view class="textinput">
					<textarea placeholder-class='placeholder' :placeholder="`填写备注信息，100字以内`" v-model="form.autograph"
						:maxlength="150" auto-height="true">
			             </textarea>
				</view>
			</div>
			<button class='baoc' formType="submit">{{`保存修改`}}</button>
			<div style='height: 100rpx;'></div>
			<!-- 选择招呼呀弹窗 -->
			<uni-popup ref="aCall" type="bottom">
				<view class="aCall">
					<view class="aCallTitle">
						选择招呼语
					</view>
					<scroll-view scroll-y="true" style="height: 700rpx;">
						<radio-group @change="radioChange">
							<!-- <view v-for="item in JSON.parse(qiyexx.share_check_text)" class="aCallDiv">
								<radio :value="item.text" :checked="item.text === shareCheckText" />
								<text>{{item.text}}</text>
							</view> -->
							<view class="aCallDiv">
								<radio :value="diyShareText" :checked="diyShareText === shareCheckText" />
								<textarea v-model="diyShareText" placeholder="请输入自定义内容" :maxlength="30" />
							</view>
						</radio-group>
					</scroll-view>
				</view>
			</uni-popup>
			<!-- 标签 -->
			<uni-popup ref="biaoqian" type="bottom">
				<div class='otian'>
					<div>
						<input type="text" maxlength="6" v-model="bioaqian">
					</div>
					<div>
						<view @click="quxiao">取消</view>
						<view @click="yesqud">确定</view>
					</div>
				</div>
			</uni-popup>
			<canvas canvas-id="canvas" v-if="canvasStatus"
				:style="{width: canvasWidth + 'px', height: canvasHeight + 'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
		</form>
	</view>
</template>

<script>
	import {
		getUserInfo,
	} from '@/api/user.js';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import {
		getProductHot
	} from '@/api/store.js';
	import {
		it_ente,
		get_position,
		carduser,
		addenter
	} from '@/api/userminp.js';
	import {
		getArticleHotList,
		getQiyeVideo
	} from '@/api/api.js';
	import {
		mapGetters
	} from 'vuex';
	import {
		getGeocoder
	} from '@/api/store.js';
	export default {
		computed: {
			...mapGetters(['viewColor']),
		},
		data() {
			return {
				canvasWidth: "",
				canvasHeight: "",
				index: 0,
				imgHost: HTTP_REQUEST_URL + '/mingpian',
				bioaqian: "",
				tian: false,
				sety: 0,
				// zhiwei: "请选择职位",
				show: false,
				type: 'textarea',
				border: true,
				height: 100,
				autoHeight: true,
				getzilest: [],
				isEdit: false,
				// 选中功能区列表
				selectAreaList: [{
						text: '创建名片',
						image: '/index/jiajia.png',
						ziew: 0,
					},
					{
						text: '添加微信',
						image: '/index/wx.png',
						ziew: 1,
					},
					{
						text: '发私信',
						image: '/index/duoxuan.png',
						ziew: 2,
					},
					{
						text: '直播',
						image: '/index/directSeeding.png',
						ziew: 4,
					},
					{
						text: '递名片',
						image: '/index/card.png',
						ziew: 6,
					},
					{
						text: '私人助理',
						image: '/index/assistant.png',
						ziew: 5,
					},
					{
						text: '转发名片',
						image: '/index/iconfj.png',
						ziew: 3,
					}
				],
				// 未选中功能区
				noSelectAreaList: [],
				form: {
					wechat_img: null,
					enterprise_id: "",
					secret_code: "",
					position_id: "",
					avatar: '',
					nickname: '',
					phone: "",
					wechat: '',
					wecom: '',
					email: '',
					autograph: "",
					label_names: null,
					article_ids: '',
					product_ids: '',
					mb_type: 0,
					mb_img: '',
					mb_img1: '',
					sex: 0,
					position_name: "",
					site_url: '',
					is_client_type: null,
					mb_video: "",
					defaultTemplate: 0,
					switch_json: '',
					addres: '',
					addressInfo: [],
					lat: '',
					long: '',
				},
				// 开关内容
				switch_json: {
					// 个人简介开关
					autographSwitch: false,
					// 标签开关
					labelSwitch: false,
					// 我的企业开关
					enterpriseSwitch: false,
					// 企业视频开关
					videoSwitch: false,
					// 热销商品开关
					productSwitch: false,
					// 文章开关
					articleSwitch: false,
				},
				// 热销商品
				page: 1,
				limit: 100,
				rexiao: [],
				produimg: [],
				// 推荐热文
				gotlist: [],
				// 企业视频
				qiyeVideo: [],
				// 企业视频id
				qiyeVideoId: [],
				// 用户已选中企业视频
				chooseQiyeVideo: [],
				// 推荐热文
				hotlist: [],
				// 标签
				biaoqi: [],
				// 我的个人名片信息
				userlist: {},
				share_uid: '',
				qiyexx: [],
				// 企业信息
				qyexx: {},
				artiids: [],
				prodids: [],
				shpintj: [],
				// 文章
				wenzhan: [],
				logo: '',
				qyname: '',
				address: '',
				type_name: '',
				// 模板图片
				mobantp: '',
				canvasStatus: false,
				// 选中分享标题
				shareCheckText: "",
				// 自定义分享内容
				diyShareText: "",
				user_info:''
			};
		},
		onLoad(e) {
			if (e.type_name) this.type_name = e.type_name
			this.UserInfo()
			// this.getcarduser()
		},
		onShow() {

		},
		watch: {
			// 监听自定义招呼语
			diyShareText: function(newVal, oldVal) {
				if (oldVal == this.shareCheckText) {
					this.shareCheckText = newVal
				}
			}
		},
		methods: {
			//选择地址
			getaddress() {
				console.log(this.form.addres);
				if (this.form.addres !== "") {
					return
					console.log('走这里了吗？');
				}
				let self = this
				uni.showLoading({
					title: '定位中',
					mask: true,
				});
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
						self.form.lat = res.latitude
						self.form.long = res.longitude
						getGeocoder({
							lat: latitude,
							long: longitude
						}).then(res => {
							const data = res.data;
							uni.hideLoading();
							self.form.addres = data.address
							console.log(self.form.addres);
						}).catch(e => {
							uni.hideLoading();
							uni.showToast({
								title: '定位失败，请手动输入地址',
								icon: 'none',
								duration: 1000
							});
						})
					},
					fail: (res) => {
						uni.hideLoading();
						uni.showToast({
							title: res,
							icon: 'none',
							duration: 1000
						});
					}
				});
			},
			// 选择招呼语
			radioChange(e) {
				this.shareCheckText = e.detail.value
			},
			// 选择招呼语弹窗
			selectACall() {
				this.$refs.aCall.open('bottom')
			},
			start() {
				this.isEdit = true
			},
			change(data) {
				this.selectAreaList = data
			},
			// 修改手机号
			editPhone() {
				uni.navigateTo({
					url: "/pages/users/user_modify_phone/index"
				})
			},
			// 是否独占
			clientSwitch(e) {
				if (e.detail.value) {
					this.form.is_client_type = 1
				} else {
					this.form.is_client_type = 0
				}
				console.log(this.form.is_client_type, 'is_client_type')
			},
			// 是否
			defaultSwitch(e) {
				if (e.detail.value) {
					this.form.defaultTemplate = 1
				} else {
					this.form.defaultTemplate = 0
				}
			},
			// 上传图片
			uploadpic: function(type) {
				let that = this;
				if (type == 1) {
					this.canvasStatus = true
					that.$util.uploadImageChange('upload/image', (res) => {
						this.form.avatar = res.data.url
					}, (res) => {}, (res) => {});
				} else if (type == 2) {
					that.$util.uploadImageChange('upload/image', (res) => {
						this.form.wechat_img = res.data.url
					}, (res) => {}, (res) => {});
				}
			},
			// 微信头像获取
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				this.$util.uploadImgs('upload/image', avatarUrl, (res) => {
					this.form.avatar = res.data.url
				}, (err) => {})
			},
			UserInfo() {
				getUserInfo().then((res) => {
					console.log(res);
					this.user_info = res.data
					this.share_uid = res.data.uid
					this.form.avatar = res.data.avatar
					this.form.phone = res.data.phone
					this.form.nickname = res.data.nickname
					this.form.email = res.data.email
					this.getcarduser()
				})
			},
			// 上传视频
			async upVideo() {
				uni.chooseMedia({
					mediaType: ["video"],
					success: (res) => {
						uni.showLoading({
							title:'上传中'
						})
						uni.uploadFile({
							url: HTTP_REQUEST_URL + '/api/upload/video',
							filePath: res.tempFiles[0].tempFilePath,
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data)
								if (res.status == 200) {
									console.log(res.data.src)
									this.form.mb_video = res.data.src
									uni.hideLoading()
								} else {
									uni.hideLoading()
									uni.showToast({
										title: '上传视频失败',
										icon: 'error',
										duration: 1000
									})
								}
								console.log(res);
							}
						});
					}
				})
			},
			// 添加模板照片
			tiajzp: function(e) {
				let that = this;
				this.canvasStatus = true
				that.$util.uploadImageChange('upload/image', (res) => {
					// this.form.avatar = res.data.url
					if (e == 1) {
						this.form.mb_img1 = res.data.url
					} else {
						this.form.mb_img = res.data.url
					}
				}, (res) => {}, (res) => {});
			},
			input(e) {
				if (e.detail.value.length >= 10) {
					uni.showToast({
						title: '名字不能过长',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 我的个人名片信息
			getcarduser() {
				carduser({
					share_uid: this.share_uid
				}).then((res) => {
					this.form.site_url = res.data.site_url
					this.form.mb_type = res.data.mb_type
					if (res.data.label_names) {
						this.biaoqi = JSON.parse(res.data.label_names)
					}
					// this.form.label_names = res.data.label_names
					this.form.mb_img = res.data.mb_img
					this.form.mb_img1 = res.data.mb_img1
					this.form.avatar = res.data.avatar
					this.form.phone = res.data.phone
					this.form.autograph = res.data.autograph
					this.form.wechat = res.data.wechat
					this.form.wecom = res.data.wecom
					this.form.email = res.data.email
					this.form.mb_video = res.data.mb_video
					this.form.nickname = res.data.nickname
					this.form.is_client_type = res.data.is_client_type
					this.form.wechat_img = res.data.wechat_img
					this.form.addres = res.data.addres
					this.form.lat = res.data.lat
					this.form.long = res.data.long
					if (res.data.switch_json) {
						this.switch_json = JSON.parse(res.data.switch_json)
						if (this.switch_json.selectAreaList) {
							this.selectAreaList = this.switch_json.selectAreaList
						}
						if (this.switch_json.noSelectAreaList) {
							this.noSelectAreaList = this.switch_json.noSelectAreaList
						}
						if (this.switch_json.diyShareText) {
							this.diyShareText = this.switch_json.diyShareText
						}
						if (this.switch_json.shareCheckText) {
							this.shareCheckText = this.switch_json.shareCheckText
						}
					}

					this.userlist = res.data
				})
			},
			// 名片样式
			setyans(e) {
				this.form.mb_type = e
			},
			// 添加指定功能
			addFunction(item, i) {
				this.selectAreaList.push(item)
				this.noSelectAreaList.splice(i, 1)
			},
			// 删除指定功能
			deleteFunction(i) {
				this.noSelectAreaList.push(this.selectAreaList[i])
				this.selectAreaList.splice(i, 1)
			},
			// 添加标签
			biaoqian() {
				this.$refs.biaoqian.open('center')
			},
			delile(index) {
				this.biaoqi.splice(index, 1)
			},
			quxiao() {
				this.$refs.biaoqian.close()
			},
			yesqud() {
				this.biaoqi.push(this.bioaqian)
				this.bioaqian = ''
				this.$refs.biaoqian.close()
			},
			open() {
				this.$refs.popup.open('bottom')
			},
			formSubmit(e) {
				console.log(this.switch_json)
				this.form.nickname = e.detail.value.nickname
				this.form.label_names = JSON.stringify(this.biaoqi)
				this.switch_json.selectAreaList = this.selectAreaList
				this.switch_json.noSelectAreaList = this.noSelectAreaList
				this.switch_json.shareCheckText = this.shareCheckText
				this.switch_json.diyShareText = this.diyShareText
				this.form.switch_json = JSON.stringify(this.switch_json)
				it_ente(this.form).then((res) => {
					uni.removeStorageSync("share_uid")
					uni.showToast({
						title: "提交成功"
					})
					uni.clearStorageSync('user_info')
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/minp',
							fail() {
								uni.redirectTo({
									url: '/pages/index/minp',
								})
							}
						})
					}, 1500)
					// uni.navigateBack()
				}).catch((res) => {
					uni.showToast({
						title: res,
						icon: 'none',
						duration: 2000
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.otian {
		padding: 40rpx 50rpx;
		background-color: #fff;
		border-radius: 25rpx;

		div:nth-child(1) {
			width: 500rpx;
			height: 150rpx;
			background-color: #eeee;
		}

		div:nth-child(2) {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 40rpx;

			view {
				width: 230rpx;
				height: 100rpx;
				border: 2rpx solid var(--view-theme);
				border-radius: 50rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 30rpx;
				color: var(--view-theme);
			}

			view:nth-child(2) {
				background-color: var(--view-theme);
				color: #fff;
			}
		}
	}

	.h-hanbao2 {
		overflow: hidden;
		margin-top: 10rpx;
		margin: 0rpx 30rpx;
		display: flex;
		border-radius: 8rpx;
		box-shadow: 0 12rpx 26rpx rgba(0, 0, 0, 0.04);
		background-color: rgba(255, 255, 255, 0.3);
		position: relative;

		// .bj {
		//      background: url('../static/mine/xiexian.png');
		//      width: 132rpx;
		//      height: 360rpx;
		//      position: absolute;
		//      left: 330rpx;
		//      z-index: 14;
		// }
		.sbajia {

			position: absolute;
			left: 298rpx;
			bottom: 108rpx;
			width: 100rpx;
			height: 338rpx;
			// background: purple;
			transform: perspective(72rpx) rotateX(28deg);

			background-color: #fff;
			z-index: 2;
		}

		div:nth-child(2) {
			z-index: 10;
		}

		div:nth-child(3) {
			z-index: 1;
		}

		.h-text {
			width: 374rpx;
			height: 122rpx;
			background-image: url('../static/mine/trone.png') no-repeat;
			background-size: 100% 100%;
			padding-top: 12rpx;
			box-sizing: border-box;
			padding-left: 48rpx;

			h3 {
				font-weight: 600;
				font-size: 42rpx;
				line-height: 60rpx;
				text-align: left;
				color: #161616;

			}

			p {
				font-weight: 600;
				font-size: 22rpx;
				line-height: 40rpx;
				text-align: left;
				color: #a0a0a0;

			}

		}

		.haibao-bott2 {
			padding: 48rpx;
			padding-top: 0rpx;
			padding-right: 0rpx;
			margin-bottom: 48rpx;
			z-index: 15;

			view {
				display: flex;
				justify-content: space-between;
				align-items: center;

				span {
					margin-top: 10rpx;

					image {
						width: 16rpx;
						height: 24rpx;
						vertical-align: middle;
					}

					span {
						font-weight: 600;
						font-size: 20rpx;
						line-height: 44rpx;
						text-align: left;
						color: #595959;
						vertical-align: middle;
						margin-left: 14rpx;
					}
				}
			}

			&>view:nth-of-type(2) {
				image {
					width: 24rpx;
					height: 20rpx;
				}
			}
		}

		.h-img {
			width: 100%;
			height: 100;
			z-index: 10;
			overflow: hidden;

			// margin-top: 28rpx;
			.herimg {
				text {
					line-height: 300rpx;
					margin-left: 150rpx;
					font-size: 50rpx;
					// display: block;
				}

				span {
					margin-left: 40rpx;
					text-align: center;
					display: block;
					margin-top: -120rpx;
				}
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.haibao-two {
		box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.04);
		margin: 0rpx 30rpx;
		background-color: rgba(255, 255, 255, 0.97);

		.moban {
			text {
				font-size: 100rpx;
			}
		}

		.haibao1 {
			.haibao-top1 {
				padding: 48rpx;
				padding-bottom: 0rpx;
				display: flex;
				justify-content: space-between;

				.haiimage1 {
					padding-top: 15rpx;

					view:nth-child(1) {
						text-align: right;

						image {
							width: 28rpx;
							height: 28rpx;
							vertical-align: middle;
						}

						span {
							margin-right: 6rpx;
							vertical-align: middle;
							font-weight: 500;
							font-size: 30rpx;
							line-height: 40rpx;
							text-align: right;
							color: #595959;
						}
					}

					view:nth-child(2) {
						width: 144rpx;
						height: 144rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.haitetx1 {
					h3 {
						font-weight: 600;
						font-size: 42rpx;
						line-height: 80rpx;
						text-align: left;
						color: #161616;
					}

					p {
						font-weight: 600;
						font-size: 22rpx;
						line-height: 40rpx;
						text-align: left;
						color: #a0a0a0;
					}
				}
			}

			.haibao-bott1 {
				padding: 48rpx;
				padding-top: 0rpx;

				view {
					display: flex;
					justify-content: space-between;

					// align-items: center;
					.twotext {
						span {
							margin-top: 10rpx;

							image {
								width: 16rpx;
								height: 24rpx;
								vertical-align: middle;
							}

							span {
								font-weight: 600;
								font-size: 24rpx;
								line-height: 44rpx;
								color: #595959;
								vertical-align: middle;
								margin-left: 14rpx;
							}
						}

						span {
							font-weight: 600;
							font-size: 24rpx;
							line-height: 44rpx;
							color: #595959;
							vertical-align: middle;
							margin-left: 14rpx;
						}
					}

					span {
						margin-top: 10rpx;

						image {
							width: 16rpx;
							height: 24rpx;
							vertical-align: middle;
						}

						span {
							font-weight: 600;
							font-size: 24rpx;
							line-height: 44rpx;
							color: #595959;
							vertical-align: middle;
							margin-left: 14rpx;
						}
					}

					span {
						font-weight: 600;
						font-size: 24rpx;
						line-height: 44rpx;
						color: #595959;
						vertical-align: middle;
						margin-left: 14rpx;
					}
				}

				&>view:nth-of-type(2) {
					&>span:nth-of-type(1) {
						image {
							width: 24rpx;
							height: 20rpx;
						}
					}
				}
			}
		}
	}

	page {
		background-color: #fff;
	}

	.rexiao {
		background-color: #f6f7f9;
		padding-top: 80rpx;
	}

	.xuze {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 14rpx 34rpx;
		padding: 10rpx;
		background-color: #fff;
		overflow: hidden;

		div:nth-child(1) {
			flex: 1;
			display: flex;

			view {
				width: 120rpx;
				height: 120rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			span {
				flex: 1;
				font-size: 23rpx;
				margin-left: 20rpx;
			}
		}

		div:nth-child(2) {
			margin: 0rpx 10rpx;
			width: 110rpx;
			height: 60rpx;
			border-radius: 10rpx;
			background-color: #E33C21;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
		}
	}

	.haibao {

		width: 688rpx;
		height: 464rpx;
		border-radius: 8rpx;
		// background: transparent;
		box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.04);
		margin: 0rpx 30rpx;
		background-color: rgba(255, 255, 255, 0.97);

		.haibao-top {
			height: 210rpx;
			padding: 48rpx;
			padding-bottom: 0rpx;
			display: flex;
			justify-content: space-between;

			.haiimage {
				padding-top: 30rpx;

				view:nth-child(1) {
					text-align: right;

					image {
						width: 28rpx;
						height: 28rpx;
						vertical-align: middle;
					}

					span {
						margin-right: 6rpx;
						vertical-align: middle;
						font-weight: 500;
						font-size: 30rpx;
						line-height: 40rpx;
						text-align: right;
						color: #595959;
					}
				}

				view:nth-child(2) {
					margin-top: 20rpx;
					width: 144rpx;
					height: 144rpx;
					overflow: hidden;
					border-radius: 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.haitetx {
				margin-top: 20rpx;

				h3 {
					font-weight: 600;
					font-size: 42rpx;
					line-height: 80rpx;
					text-align: left;
					color: #161616;
				}

				p {
					font-weight: 600;
					font-size: 22rpx;
					line-height: 40rpx;
					text-align: left;
					color: #a0a0a0;
				}
			}
		}

		.haibao-bott {
			margin-top: 25rpx;
			padding: 48rpx;
			padding-top: 0rpx;

			view {
				display: flex;
				justify-content: space-between;

				span {
					margin: right;
					margin-top: 10rpx;

					image {
						flex: 1;
						width: 16rpx;
						height: 24rpx;
						vertical-align: middle;
					}

					span {
						font-weight: 600;
						font-size: 24rpx;
						line-height: 44rpx;
						color: #595959;
						vertical-align: middle;
						margin-left: 14rpx;
					}
				}

				span {
					font-weight: 600;
					font-size: 24rpx;
					line-height: 44rpx;
					color: #595959;
					vertical-align: middle;
					margin-left: 14rpx;
				}

				// align-items: center;
				.odiver {
					span {
						margin: right;
						margin-top: 10rpx;

						image {
							flex: 1;
							width: 16rpx;
							height: 24rpx;
							vertical-align: middle;
						}

						span {
							font-weight: 600;
							font-size: 24rpx;
							line-height: 44rpx;
							color: #595959;
							vertical-align: middle;
							margin-left: 14rpx;
						}
					}

					span {
						font-weight: 600;
						font-size: 24rpx;
						line-height: 44rpx;
						color: #595959;
						vertical-align: middle;
						margin-left: 14rpx;
					}
				}

			}

			&>view:nth-of-type(2) {
				&>span:nth-of-type(1) {
					image {
						width: 24rpx;
						height: 20rpx;
					}
				}
			}
		}
	}

	.mpys {
		padding: 48rpx;

		p {
			font-weight: 600;
			font-size: 32rpx;
			line-height: 44rpx;
			text-align: left;
			color: #161616;
		}

		.xuanze {
			padding-top: 48rpx;
			padding-bottom: 20rpx;

			view {
				margin-right: 20rpx;
				width: 112rpx;
				height: 128rpx;
				border-radius: 5rpx;
				overflow: hidden;
				background-color: #a0a0a0;
				display: inline-block;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.oimg {
				border: 2rpx solid var(--view-theme);
			}
		}

		.zhuzu {
			width: 656rpx;
			height: 80rpx;
			border-radius: 8rpx;
			background-color: rgba(255, 171, 166, .2);
			display: flex;
			justify-content: space-between;
			align-items: center;

			span:nth-child(2) {

				text {
					font-weight: 400;
					font-size: 24rpx;
					line-height: 44rpx;
					color: #e33c21;

				}

				image {
					width: 16rpx;
					height: 32rpx;
				}
			}

			span {
				padding: 0rpx 20rpx;

				text {
					vertical-align: middle;
					font-weight: 500;
					font-size: 28rpx;
					line-height: 44rpx;
					color: #e33c21;
				}

				image {
					margin-right: 10rpx;
					vertical-align: middle;
					width: 30rpx;
					height: 28rpx;
				}
			}
		}
	}

	.grxx {
		p {
			padding-left: 48rpx;
			background: #f6f7f9;
			font-weight: 600;
			font-size: 28rpx;
			line-height: 80rpx;
			text-align: left;
			color: #595959;
		}

		.grxx-qyml {
			padding: 0rpx 48rpx;

			view {
				padding: 30rpx 0rpx;
				border-bottom: 2rpx solid #eee;
				display: flex;
				justify-content: space-between;
				align-items: center;

				span {
					font-weight: 600;
					font-size: 32rpx;
					line-height: 44rpx;
					text-align: left;
					color: #161616;

					.xxred {
						color: red;
					}
				}

				input {
					width: 450rpx;
				}

				.okden {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 450rpx;
					font-weight: 400;
					font-size: 30rpx;
					line-height: 44rpx;
					text-align: left;
					color: #161616;

					image {
						width: 16rpx;
						height: 32rpx;
						vertical-align: middle;
					}
				}
			}
		}
	}

	.mpdxx {
		padding: 0rpx 48rpx;
		border-top: 20rpx solid #f6f7f9;

		.mpxxbott {
			border-bottom: 2rpx solid #eee;
			padding: 32rpx 0rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			span {
				font-weight: 600;
				font-size: 32rpx;
				line-height: 44rpx;
				text-align: left;
				color: #161616;

				.xxred {
					color: red;
				}
			}

			p {
				width: 454rpx;
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 30rpx;
				line-height: 44rpx;
				text-align: left;
				color: #161616;
			}

			.namexx {
				width: 454rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 400;
				font-size: 32rpx;
				line-height: 44rpx;
				text-align: left;
				color: #161616;

				input {
					flex: 1;
				}

				span {
					font-size: 32rpx;
					font-weight: 400;
				}

				image {
					width: 26.38rpx;
					height: 28rpx;
				}

				.wechatCode {
					height: 90rpx;
					width: 90rpx;
				}
			}

			.toux {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				view:nth-child(2) {
					span {
						color: #161616;
						font-size: 32rpx;
						font-weight: 100;
					}

					image {
						margin-left: 20rpx;
					}
				}

				.touxiangS {
					display: flex;
					align-items: center;

					image {
						margin-left: 10rpx;
						vertical-align: middle;
					}
				}

				.touxiang {
					padding: 0rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 100rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				image {
					width: 16rpx;
					height: 32rpx;
				}
			}
		}
	}

	.oinput {
		border-top: 20rpx solid #f6f7f9;
		padding: 0rpx 48rpx;

		p {
			font-weight: 600;
			font-size: 32rpx;
			line-height: 100rpx;
			text-align: left;
			color: #161616;
			display: flex;
			justify-content: space-between;
		}

		view {
			margin: 30rpx 0rpx;
		}
	}

	.functionArea {
		border-top: 20rpx solid #f6f7f9;
		padding: 0rpx 48rpx;

		&>p {
			font-weight: 600;
			font-size: 32rpx;
			line-height: 100rpx;
			text-align: left;
			color: #161616;
		}

		.selectArea {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			&>view {
				margin: 20rpx 0rpx;
				margin-left: 20rpx;
				padding: 0rpx 25rpx;
				border-radius: 32rpx;
				background: #f7f8fa;
				font-weight: 600;
				font-size: 24rpx;
				text-align: center;
				line-height: 60rpx;
				display: flex;
				align-items: center;
				color: #595959;

				.poster {
					width: 22rpx;
				}
			}
		}

		.active {
			background-color: pink !important;
		}
	}

	.gxbq {
		border-top: 20rpx solid #f6f7f9;
		padding: 0rpx 48rpx;

		p {
			font-weight: 600;
			font-size: 32rpx;
			line-height: 100rpx;
			text-align: left;
			color: #161616;
			display: flex;
			justify-content: space-between;
		}

		.tianjia {
			// width: ;

			padding: 30rpx 0rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			// .ofor:nth-child(1) {
			// 	margin-left: 0rpx;
			// }

			.ofor {
				margin: 20rpx 0rpx;
				margin-left: 20rpx;
				padding: 0rpx 25rpx;
				border-radius: 32rpx;
				background: #f7f8fa;
				font-weight: 600;
				font-size: 24rpx;
				text-align: center;
				line-height: 60rpx;
				display: flex;
				align-items: center;
				color: #595959;

				.poster {
					width: 22rpx;
				}
			}

			.jia {
				// margin-top: 20rpx;
				margin-left: 20rpx;
				width: 144rpx;
				// height: 64rpx;
				border: 2rpx solid var(--view-theme);
				border-radius: 50rpx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;

				span {
					// margin: auto;
					// line-height: 64rpx;
					// font-weight: 100;
					font-size: 40rpx;
					color: var(--view-theme);
					padding-bottom: 4rpx;
				}
			}
		}
	}

	.wdqy {
		height: 96rpx;
		background-color: #f6f7f9;
		font-weight: 600;
		font-size: 32rpx;
		line-height: 96rpx;
		text-align: left;
		color: #161616;
		padding: 0 48rpx;
		display: flex;
		justify-content: space-between;
	}

	.wdqyxx {
		padding: 0rpx 48rpx;

		.guanw {
			display: flex;
			justify-content: space-between;
			align-items: center;

			div {
				display: flex;
				justify-content: space-between;
				align-items: center;

				input {
					margin-left: 80rpx;
					flex: 1;
					width: 90%;
					font-weight: 400;
					font-size: 28rpx;
					line-height: 44rpx;
					text-align: left;
					color: #161616;
				}

			}

		}

		view {
			border-bottom: 2rpx solid #eee;
			padding: 32rpx 0rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>view {
				border: none;
			}

			span {
				font-weight: 600;
				font-size: 28rpx;
				line-height: 44rpx;
				text-align: left;
				color: #161616;
			}

			p {
				width: 454rpx;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 44rpx;
				text-align: left;
				color: #161616;
			}

			.touxiang {
				padding: 0rpx;
				width: 96rpx;
				height: 96rpx;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.toux {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 26rpx;
				line-height: 44rpx;
				text-align: right;
				color: #777;

				image {
					width: 16rpx;
					height: 32rpx;
				}
			}
		}
	}

	.textinput {
		padding: 40rpx;
		background-color: #f9f9f9;
	}

	.shangc {
		padding: 48rpx;

		.sjhang {
			margin: 20rpx 15rpx;
			vertical-align: middle;
			border: 2rpx dashed #595959;
			display: inline-block;
			margin-right: 10rpx;
			width: 180rpx;
			height: 180rpx;
			position: relative;
		}

		.sjhangnoe {
			display: none;
		}

		view {


			.iconter {
				position: absolute;
				top: -24rpx;
				left: 140rpx;
				font-size: 52rpx;
				border-radius: 100%;
				overflow: hidden;
				background-color: #fff;
			}

			image {
				width: 100%;
				height: 100%;
			}

			div {
				text-align: center;

				span:nth-child(1) {
					color: #595959;
					display: block;
					font-size: 100rpx;
				}

				span:nth-child(2) {
					color: #595959;
					display: block;
					font-size: 24rpx;
				}
			}
		}
	}

	.baoc {
		margin: auto;
		width: 464rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background: var(--view-theme);
		box-shadow: 0 12rpx 36rpx rgba(193, 0, 0, 0.1);
		font-weight: 600;
		font-size: 34rpx;
		line-height: 96rpx;
		text-align: center;
		color: #fff;
		margin-bottom: 60rpx;
		margin-top: 40rpx;
	}

	.yulan {
		margin: auto;
		margin-top: 60rpx;
		width: 464rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background: transparent;
		border: 2rpx solid #e33c21;
		font-weight: 400;
		font-size: 34rpx;
		text-align: center;
		color: #e33c21;
		line-height: 96rpx;
		margin-bottom: 60rpx;
	}

	.haibaoText {
		margin-top: 10rpx;

		&>view {
			display: flex;
			align-items: center;
			margin-top: 10px;

			text {
				margin-right: 10rpx;
			}

			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}

	.aCall {
		background: white;
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx;

		.aCallTitle {
			text-align: center;
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}

		.aCallDiv {
			margin-bottom: 20rpx;
			display: flex;

			radio {
				margin-right: 20rpx;
			}

			textarea {
				width: 100%;
				border: 1rpx solid gainsboro;
				height: 120rpx;
				border-radius: 10rpx;
				padding: 10rpx;
			}
		}
	}
</style>